<template>
  <div class="app-container">
    <!-- openAssignAccountDialog -->
    <div class="filter-container">
      <span v-if="authorityHandle(258)" class="filter-title filter-item">雷场开关</span>
      <k-select
        v-if="authorityHandle(258)"
        v-model="roomType"
        class="filter-item right-item"
        style="width: 120px"
        :select-params="[
          { label: '开', value: 1 },
          { label: '关', value: 2 },
        ]"
        @handleSelectEvent="handleFilter"
      />
    </div>
    <div class="top-right-btn-container">
      <k-button v-if="authorityHandle(258)" class="top-btn" value="添加雷场" @click.native="addBoxDialog" />
      <!-- <k-button v-if="authorityHandle(258)" class="top-btn" value="玩法介绍" @click.native="ruleGuideDialog" /> -->
      <k-button v-if="authorityHandle(258)" class="top-right-btn" value="设置" @click.native="settingDialog" />
      <div class="top-right-switch">
        <el-switch
          v-model="allOpen"
          active-color="#3b425d"
          inactive-color="#E9EBF2"
          :active-value="1"
          :inactive-value="2"
          :disabled="!authorityHandle(258)"
          @change="allOpens"
        />
      </div>
    </div>
    <!--表格相关 -->
    <el-table
      ref="dragTable"
      :data="boxList"
      fit
      border
      highlight-current-row
      row-key="id"
      style="width: 100%; border-radius: 8px"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
    >
      <!-- <el-table-column min-width="60px" type="selection" align="center" /> -->
      <el-table-column width="60px" label="序号" type="index" align="center" />
      <el-table-column prop="minefieldName" min-width="100px" label="雷场名称" show-overflow-tooltip align="center" />
      <el-table-column prop="minefieldPrice" min-width="80px" label="雷场价格" align="center" />
      <el-table-column prop="minefieldNum" min-width="80px" label="雷区数量" align="center" />
      <el-table-column prop="minefieldRotation" min-width="90px" label="总轮次" align="center" />
      <el-table-column prop="income" min-width="90px" label="一轮收益" align="center" />
      <el-table-column prop="profit" min-width="80px" label="单次利润" align="center" />
      <el-table-column prop="createTime" min-width="110px" label="添加时间" align="center" />
      <el-table-column min-width="110px" label="开关" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            :active-value="1"
            :inactive-value="2"
            :disabled="!authorityHandle(258)"
            @change="boxOnlineState(scope)"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="200px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button v-if="authorityHandle(258)" class="table-btn" value="查看/修改" @click.native="addBoxUpdateDialog(scope.row)" />
            <k-button class="table-btn" value="雷区管理" @click.native="bulletSettingDialog(scope.row, 'v')" />
            <k-button v-if="authorityHandle(258)" class="table-btn" value="雷场轮次" @click.native="bulletSettingDialog(scope.row, 's')" />
            <k-button v-if="authorityHandle(258)" class="table-btn" value="删除" @click.native="configBabyLib(scope.row.id, 41)" />
            <!-- :disabled="scope.row.boxStatus === 1 ? true : false" -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加雷场 addBox 弹窗 -->
    <k-dialog
      :show-hide.sync="addBox.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="addBox-dialog"
      :title="textMap[dialogStatus]"
      :show-foot="false"
      :two-btn="true"
      @click="pushBoxDataEvent"
    >
      <!-- 这里参考用户通道 -->
      <div class="dialog-giveBabySetting">
        <div v-if="boxType === 'addBox'" style="padding: 20px; margin-left: 50px">
          <div style="margin-bottom: 10px">
            <label>雷场名称：</label>
            <el-input
              v-model="minefield.name"
              style="width: 70%"
              :readonly="!authorityHandle(258)"
              show-word-limit
              placeholder="请输入雷场名称"
            />
          </div>

          <label>雷场价格：</label>
          <el-input
            v-model="minefield.price"
            type="number"
            style="width: 70%"
            :readonly="!authorityHandle(258)"
            show-word-limit
            placeholder="请输入雷场价值"
          />
        </div>
      </div>
    </k-dialog>
    <!-- addBox 修改弹窗 -->
    <k-dialog
      :show-hide.sync="addBoxUpdate.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="addBox-dialog"
      title="修改雷场"
      :show-foot="false"
      :two-btn="authorityHandle(258)"
      @click="saveBoxDataEvent"
    >
      <el-form :model="minefield" label-width="auto" class="form-modify">
        <el-form-item label="雷场名称：" prop="name">
          <el-input v-model="minefield.name" :readonly="!authorityHandle(258)" show-word-limit placeholder="请输入箱子名称" />
        </el-form-item>
        <el-form-item label="雷场价格：" prop="price">
          <el-input
            v-model="minefield.price"
            type="number"
            :readonly="!authorityHandle(258)"
            show-word-limit
            placeholder="请输入雷场价格"
            @keyup.native="value = oninput(value)"
          />
        </el-form-item>
      </el-form>
    </k-dialog>
    <!-- 雷场轮次 弹窗 -->
    <k-dialog
      :show-hide.sync="bulletSetting"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="雷场轮次"
      ok-btn-text="更新"
      no-btn-text="保存"
      class-name="creatRollRoom_dialog"
      :show-foot="false"
    >
      <div class="set_top">
        <el-radio-group
          v-model="userTypeChannel"
          fill="#3b425d"
          text-color="#ffffff"
          class="top-radio-group"
          @change="userTypeChannels(userTypeChannel)"
        >
          <el-radio-button :label="1" @click="userTypeChannels(1)">用户通道</el-radio-button>
          <el-radio-button :label="2" @click="userTypeChannels(2)">主播通道</el-radio-button>
        </el-radio-group>
        <!-- <k-button class="top-btn" :class="userTypeChannel == 1 ? '' : 'selectIndex'" value="用户通道" :type="userTypeChannel == 1 ? 'success' : 'info'" round @click="userTypeChannels(1)" />
        <k-button class="top-btn" :class="userTypeChannel == 2 ? 'selectIndex' : ''" value="主播通道" :type="userTypeChannel == 2 ? 'success' : 'info'" round @click="userTypeChannels(2)" /> -->
      </div>
      <div class="copyU">
        <k-button class="table-btn" value="复制用户通道至主播通道" @click.native="copyUserAnchor" />
      </div>

      <div class="set_box">
        <div class="Recharge_Data">
          <div class="Recharge_Data_box">
            <span>雷区1轮次:</span>
            <el-input v-model.trim="bulletSettingItemList.minNum" :readonly="!authorityHandle(41)" />
            <i style="margin: 0 2px">—</i>
            <el-input
              v-model.trim="bulletSettingItemList.maxNum"
              :readonly="!authorityHandle(258)"
              style="margin-right: 20px"
            />
          </div>
        </div>
        <div class="minefield">雷区2轮次:{{ updateMinefield['2'] }}</div>
        <div class="minefield">雷区3轮次:{{ updateMinefield['3'] }}</div>
        <div class="minefield">雷区4轮次:{{ updateMinefield['4'] }}</div>
        <div class="minefield">雷区5轮次:{{ updateMinefield['5'] }}</div>
        <div class="minefield">雷区6轮次:{{ updateMinefield['6'] }}</div>
        <div class="minefield">通关轮次:{{ updateMinefield.passNum }}</div>
        <div class="minefield">总轮数:{{ updateMinefield.minefieldRotation }}</div>
        <div class="minefield">总收益:{{ updateMinefield.income }}</div>
        <div class="minefield">单次利润:{{ updateMinefield.profit }}</div>
        <div class="set_tops">
          <k-button class="table-btn" value="更新" @click.native="saveBulletSetting" />
          <k-button class="table-btn" value="保存" @click.native="handleCloseDialog" />
        </div>
      </div>
    </k-dialog>
    <!-- 设置 弹窗 -->
    <k-dialog
      :show-hide.sync="battleSetting"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="setting_dialog"
      title="设置"
    >
      <el-form :model="minefield" label-width="auto" class="form-modify">
        <el-form-item label="排雷门槛：" prop="price">
          <el-input
            v-model="minefield.threshold"
            type="number"
            :readonly="!authorityHandle(258)"
            show-word-limit
            placeholder="请输入门槛价值"
          />
        </el-form-item>
      </el-form>
      <div class="butt">
        <el-button type="primary" @click="saveSettingDialog">保存</el-button>
      </div>
    </k-dialog>
    <!-- 玩法介绍 弹窗 -->
    <k-dialog
      :show-hide.sync="ruleGuide.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="玩法介绍"
      class-name="ruleGuide-dialog"
      :show-foot="false"
      :two-btn="authorityHandle(258)"
      @click="guideSave"
    >
      <div class="dialog-ruleGuide" style="padding: 30px">
        <el-form :model="ruleGuideContent" label-width="auto">
          <el-form-item label="内容介绍：" prop="content">
            <quill-editor
              ref="myQuillEditor"
              v-model.trim="ruleGuideContent.content"
              :options="editorOption"
              class="editer"
            />
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
  </div>
</template>

<script>
import { updateSlBoxSort } from '@/api/battel/index'
import {
  updateMinefieldRotation,
  setMinefieldRotation,
  getMinefieldRotation,
  updateMinefieldStatus,
  getStatusAll,
  setStatusAll,
  setMinefieldDescribe,
  getMinefieldDescribe,
  addMinefield,
  listMinefieldData,
  updateMinefield,
  delMinefield,
  getThreshold,
  setThreshold
} from '@/api/minefield/index'
// import { getBoxStageList, setBoxStageList } from '@/api/rules/listdata'

// import Pagination from '@/components/Pagination'
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      updateMinefield: [],
      roomType: '',
      allOpen: false,
      minefield: {
        name: '',
        price: 0,
        id: 0,
        threshold: 0
      },
      mostDefeatNum: [], // 最多连败数量
      currentUserId: -1,
      relatedLimit: {
        minPrice: undefined, // 对战门槛',
        maxCount: undefined, // 同时对战上限',
        minTime: undefined, // 进出房间时间限制',
        maxBoxTypeCount: undefined, // 对战箱子种类上限',
        maxBoxNum: undefined, // 对战箱子数量上限',
        fissionCouldUser: false, // 主播是否可加入玩家',
        robotCouldUser: false, // AI是否可加入玩家',
        fissionCouldRobot: false // 主播是否可加入AI'
      },
      unusefullModel: undefined,
      normalAiValueModel: {
        id: undefined,
        boxId: -1, // 箱子id',
        openCount: undefined, // 开箱数量',
        userId: undefined // 开箱AIid'
      },
      specialAiValueModelList: [
        {
          boxId: undefined, // 箱子id',
          openCount: undefined, // 开箱数量',
          userId: undefined // 开箱AIid'
        }
      ],
      checkList: [],
      robotResultList: [],
      boxResultList: [],
      giveGoodsResultList: [],
      checkedGiveBabyList: [],
      goodsValueModel: [],
      boxValueModel: [],
      resultOpList: [],
      checkedBoxsList: [],
      boxType: 'addBox',
      settingType: 'robotBoxSetting',
      currentBoxId: undefined,
      bulletSettingItemList: [
        {
          id: undefined,
          boxId: undefined,
          minAmmo: undefined,
          maxAmmo: undefined,
          probability: undefined
        }
      ],
      divideZone: {
        divideZoneArray: [
          {
            id: undefined,
            boxId: -2,
            minPercent: '',
            maxPercent: '',
            openSort: 0
          }
        ]
      },
      multipleSelection: [],
      addBoxInfo: {
        id: '', // 保存箱子配置时必传",
        imgUrl: '', // 箱子图标",
        goodsImgUrl: '', // 饰品展示缩略图",
        boxName: '' // 箱子名称",
      },
      boxList: [],
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        startTime: undefined, // 饰品外观',
        endTime: undefined, // 饰品类别',
        key: '' // 箱子名称或关键词 箱子配置界面所用'
      },
      timeValue: '',
      conditions: {
        keyword: null
      },
      addBox: {
        showHide: false
      },
      addBoxUpdate: {
        showHide: false
      },
      giveBabySetting: {
        showHide: false
      },
      ruleGuide: {
        showHide: false
      },
      ruleGuideContent: {
        content: ''
      },
      editorOption: {
        //  富文本编辑器配置
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            [{ script: 'sub' }, { script: 'super' }], // 上下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], // 字体
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image'] // 上传图片、上传视频
          ]
        }
      },
      bulletSetting: false,
      battleSetting: false,
      smartDivideZoneDialog: false,
      dialogStatus: 'create',
      textMap: {
        update: '修改雷场',
        create: '添加雷场'
      },
      userMobile: '',
      roomId: '',
      userTypeChannel: 1
    }
  },
  watch: {
    // 时间赋值
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },
  created() {
    this.loadData()
    getStatusAll().then((res) => {
      this.allOpen = res.data
    })
  },
  methods: {
    // 复制用户到主播
    copyUserAnchor() {
      // updateMinefieldRotation({
      //   minNum: this.bulletSettingItemList.minNum,
      //   maxNum: this.bulletSettingItemList.maxNum,
      //   id: this.currentBoxId,
      //   userType: this.userTypeChannel
      // }).then((res) => {
      //   this.updateMinefield = res.data.data
      setMinefieldRotation({
        minNum: this.bulletSettingItemList.minNum,
        maxNum: this.bulletSettingItemList.maxNum,
        oneRotation: this.updateMinefield['1'],

        id: this.currentBoxId,
        userType: 2
      }).then((res) => {
        console.log(res)
      })
      // })
    },
    // 表格数据
    loadData() {
      this.boxList = [1, 2]
      this.totalRows = 15
      listMinefieldData(this.listQuery).then((res) => {
        const data = res.data
        this.totalRows = data.totalRows
        this.boxList = data.rows
        // let list = []
        // for(let i=0;i<data.rows.length;i++){
        // 	data.rows[i].zone_sort = i
        // 	list.push(data.rows[i])
        // }
        // this.boxList = list

        this.$nextTick(() => {
          this.setSort()
        })
      })
    },
    // 总开关
    allOpens() {
      setStatusAll({ 'status': this.allOpen }).then((res) => {
        console.log('asdasdsadasdas')
      })
    },
    addBoxUpdateDialog(row) {
      console.log(row)
      this.addBoxUpdate.showHide = true
      this.addBoxInfo.id = row.id
      this.minefield.name = row.minefieldName
      this.minefield.price = row.minefieldPrice
      // this.$log(this.addBoxInfo)
    },
    // 添加修改箱子
    saveBoxDataEvent(v) {
      console.log(v)
      const data = {
        minefieldName: this.minefield.name,
        minefieldPrice: this.minefield.price,
        id: this.addBoxInfo.id
      }
      updateMinefield(data).then((res) => {
        if (!res.data.success) {
          this.$message.error(res.data.msg)
          return
        }
        this.addBoxUpdate.showHide = false
        this.$message.success(res.data.msg)
        this.loadData()
      })
    },
    // 选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop
      if (column.order === 'ascending') {
        this.listQuery.direction = 'asc'
      } else if (column.order === 'descending') {
        this.listQuery.direction = 'desc'
      }
      this.loadData()
    },
    // 排序
    setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const list = JSON.parse(JSON.stringify(this.boxList))
          const targetRow = list.splice(evt.oldIndex, 1)[0]
          list.splice(evt.newIndex, 0, targetRow)
          list.reverse().map((item, index) => {
            item.sort = index
          })
          console.log('list: ', list)
          updateSlBoxSort(list).then(res => {
            if (res.data.success) {
              this.$message.success(res.data.msg)
              this.boxList = []
              this.loadData()
            }
          })
        }
      })
    },
    // 修改后重置
    handleFilter() {
      if (this.roomType == 3) this.roomType = 1

      this.listQuery['status'] = this.roomType
      this.loadData()
      // this.listQuery.pager.pageNo = 1
      // this.loadData()
    },
    // 雷场开关
    boxOnlineState(scope) {
      const id = scope.row.id
      console.log(scope.row.status)
      updateMinefieldStatus({ id: id, status: scope.row.status }).then(
        (res) => {
          const isOk = res.data.success
          if (isOk) {
            this.$message.success('操作成功')
          } else {
            this.$message.error(res.data.msg)
            scope.row.boxStatus = 1
          }
        }
      )
    },
    // 用户主播通道
    userTypeChannels(v) {
      console.log('dasdasdas', v)
      this.userTypeChannel = v
      getMinefieldRotation({ id: this.currentBoxId, userType: this.userTypeChannel }).then((res) => {
        this.bulletSettingItemList = res.data
        this.updateMinefield = res.data
      })
    },
    // 雷场轮次
    bulletSettingDialog(row, v) {
      if (v == 'v') {
        this.$router.push(`/leiquName/minefield-manage?id=${row.id}`)
      } else {
        this.bulletSetting = true
        this.currentBoxId = row.id
        getMinefieldRotation({ id: row.id, userType: this.userTypeChannel }).then((res) => {
          this.bulletSettingItemList = res.data
          this.updateMinefield = res.data
        })
      }
    },
    // 保存雷场轮次
    handleCloseDialog() {
      setMinefieldRotation({
        minNum: this.bulletSettingItemList.minNum,
        maxNum: this.bulletSettingItemList.maxNum,
        oneRotation: this.updateMinefield['1'],

        id: this.currentBoxId,
        userType: this.userTypeChannel
      }).then((res) => {
        if (!res.data.success) {
          this.$message.error(res.data.msg)
        } else {
          this.$message.success(res.data.msg)
          this.loadData()
        }
      })
    },
    // 更新雷场轮次
    saveBulletSetting(v) {
      updateMinefieldRotation({
        minNum: this.bulletSettingItemList.minNum,
        maxNum: this.bulletSettingItemList.maxNum,
        id: this.currentBoxId,
        userType: this.userTypeChannel
      }).then((res) => {
        if (!res.data.success) return this.$message.error(res.data.msg)
        this.updateMinefield = res.data.data
      })
    },
    // 删除
    configBabyLib(v) {
      console.log(v)
      this.$confirm('确定删除选中的雷场么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const data = {
            id: v
          }
          if (v.status == 1) return this.$message.error('不可删除已开启的雷场')
          delMinefield(data).then((res) => {
            this.loadData()
            console.log(res.data)
            if (res.data.success) this.$message.success(res.data.msg)
            else this.$message.error(res.data.msg)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 设置弹窗
    settingDialog() {
      this.battleSetting = true
      // 获取门槛价值
      getThreshold().then((res) => {
        console.log(res.data)
        if (res.data == '') this.minefield.threshold = 0
        else this.minefield.threshold = res.data
      })
    },
    // 添加箱子
    addBoxDialog() {
      this.$resetForm(this.minefield)
      // this.checkedBoxsList = []
      // getGeneralList().then(res => {
      //   this.resultOpList = res.data
      // })
      this.addBox.showHide = true
    },
    saveSettingDialog() {
      const data = {
        threshold: this.minefield.threshold
      }
      if (data.threshold.toString() == '') return this.$message.error('雷场门槛不可为空')
      if (data.threshold < 0) return this.$message.error('雷场门槛不可为负数')
      setThreshold(data).then((res) => {
        console.log(res)
        this.$message.success(res.message)
        this.battleSetting = false
      })
    },
    pushBoxDataEvent() {
      if (this.minefield.name && this.minefield.price) {
        const data = {
          minefieldName: this.minefield.name,
          minefieldPrice: this.minefield.price
        }
        addMinefield(data).then((res) => {
          console.log(res)
          if (!res.data.success) return this.$message.error(res.data.msg)
          this.addBox.showHide = false
          this.$message.success('操作成功')
          this.loadData()
        })
      } else {
        this.$message.error('不可为空')
      }
    },
    guideSave() {
      const data = {
        data: this.ruleGuideContent.content
      }
      setMinefieldDescribe(data).then((res) => {
        console.log(res)
        this.ruleGuide.showHide = false
      })
    },
    ruleGuideDialog() {
      this.ruleGuide.showHide = true
      getMinefieldDescribe().then((res) => {
        console.log(res)
        this.ruleGuideContent.content = res.data
      })
    },
    oninput(num) {
      var str = JSON.parse(JSON.stringify(num))
      let int = '' // 整数部分
      var point = '' // 小数部分
      var len1 = str.substr(0, 1)
      var len2 = str.substr(1, 1)

      if (str.indexOf('.') > -1) {
        int = str.substring(0, str.indexOf('.')) // 取整数
        // 如果第一位是-，第二位是. 用0补位 -0.xx
        if (len1 === '-' && len2 === '.') {
          int = len1 + '0'
        }
        // 如果第一位是. 第一位数字用0补位
        if (len1 === '.') {
          int = '0'
        }
        point = str.substr(str.indexOf('.') + 1, 2) // 取小数点后两位
        str = int + '.' + point
      } else {
        if (len1 === '0' && len2 === '0') {
          // 第一位是0， 第二位也是0时，用。分隔 -> 0.0
          str = len1 + '.' + len2
        } else if (len1 === '0' && Number(len2) > 0) {
          // 第一位是0， 第二位大于0，用。分隔 -> 0.x
          str = len1 + '.' + len2
        } else {
          str = num
        }
      }
      return str
    }
  }
}
</script>
<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.butt {
  text-align: center;
}

// .setting_dialog{
//   width: 606px !important;
// }
.consecutive {
  width: 736px;
}

.dialog-DivideZone {
  ::v-deep.el-input {
    width: 110px;
  }

  .price-input {
    width: 150px;
  }

  .el-icon {

    &-circle-plus,
    &-remove {
      font-size: 22px;
      color: #3b425d;
      margin-left: 10px;
    }
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      margin: 0 0 30px 0px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .warning-title {
        font-size: 16px;
        color: $menuText;
        margin-right: 10px;
        margin-left: 20px;
      }

      i {
        color: #d1d5dd;
      }

      &.noTitle {
        &:before {
          display: block;
          width: 80px;
          content: "";
        }
      }

      &.hasTitle {
        &:before {
          font-weight: 700;
          color: $menuText;
          content: "特殊AI配置:";
        }
      }
    }
  }
}

.dialog-warningSetting {
  ::v-deep.el-input {
    width: 150px;
  }

  .price-input {
    width: 110px;
  }

  .el-icon {

    &-circle-plus,
    &-remove {
      font-size: 22px;
      color: #3b425d;
      margin-left: 10px;
    }
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    &:first-child {
      li {
        &:first-child {
          &:before {
            content: "常规AI配置:";
            width: 80px;
            font-weight: 700;
            color: $menuText;
            display: block;
          }
        }
      }
    }

    li {
      margin: 0 0 30px 0px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .warning-title {
        font-size: 16px;
        color: $menuText;
        margin-right: 10px;
        margin-left: 20px;
      }

      i {
        color: #d1d5dd;
      }

      &.noTitle {
        &:before {
          display: block;
          width: 80px;
          content: "";
        }
      }

      &.hasTitle {
        &:before {
          font-weight: 700;
          color: $menuText;
          content: "特殊AI配置:";
        }
      }
    }
  }
}

.editer {
  width: 500px;
  border-radius: 8px;
  float: left;
  box-sizing: border-box;
  color: #606266;

  ::v-deep .ql-container {
    height: 400px;
    border-radius: 0px 0px 8px 8px;
  }

  ::v-deep .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0px 0px;
  }
}

.radiodiv {
  display: flex;
  flex-direction: column;
  margin-left: 120px;

  .el-checkbox {
    width: 200px;
    margin-top: 20px;
  }
}

.second {
  line-height: 40px;
  margin-left: 10px;
}

.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162e;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}

.top-btn {
  margin: 30px 0px 30px 0px;
  font-size: 14px;
  color: #ffffff;

  &:nth-of-type(2) {
    margin-left: 20px;
  }

  &:nth-of-type(3) {
    margin-left: 20px;
  }

  &:nth-of-type(4) {
    margin-left: 20px;
  }

  &:nth-of-type(5) {
    margin-left: 20px;
  }
}

.top-right-btn-container {
  position: relative;
  display: flex;

  .top-right-btn {
    position: absolute;
    right: 100px;
    top: 30px;
    background-color: #f8f7fb;
    border-color: transparent;
    color: #14162e;

    &:hover {
      color: #ffffff;
      background-color: $mainColor;
    }

    &:active {
      color: #14162e;
    }
  }

  .top-right-switch {
    position: absolute;
    right: 20px;
    top: 35px;
    background-color: #f8f7fb;
    border-color: transparent;
    color: #14162e;
  }

  .handle-main {
    display: flex;
    margin-left: 0px;

    .handle-item {
      display: flex;
      align-items: center;
      width: 250px;
      margin-left: 50px;
    }
  }
}

::v-deep .el-input__inner:focus {
  border-color: $mainColor;
}

.el-form-item__label-wrap .el-form-item__label {
  float: none;
}

.top-radio-group {
  margin-bottom: 40px;
}

.dialog-openboxsetting {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 80px 80px;
}

.form-modify {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 10px 80px;

  .modify-right {
    margin-left: 80px;
  }

  ::v-deep .el-input__inner {
    // border-color: $mainColor;
    width: 200px;
  }
}

.give-dialog {
  ::v-deep .el-dialog__body {
    width: 678px;
    text-align: center;
  }

  .give_div {
    margin: 0 auto;
    padding: 50px 0px;
    height: 400px;
  }
}

.addBox-dialog {
  ::v-deep .el-dialog__body {
    width: 678px;
    padding: 10px 30px 30px 30px;
  }

  ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 40px;
  }

  ::v-deep .el-select .el-select__tags>span {
    display: none;
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .el-tag {
    color: $mainColor;
    background-color: #ffffff;
    border-color: $mainColor;

    ::v-deep .el-tag__close {
      color: $mainColor;
    }

    ::v-deep .el-icon-close:hover {
      color: #ffffff;
      background: $mainColor;
    }
  }
}

.upload-btn {
  font-size: 14px;
  color: #ffffff;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.table-btn {
  width: 90px;
  height: 35px;
  line-height: 35px;
  padding: 0;
  background: #e7ecf8;
  border: 1px solid $mainColor;
  border-radius: 8px;
  font-size: 14px;
  color: $mainColor;

  &:hover {
    background: $mainColor;
    color: #fff;
  }

  &:nth-of-type(3) {
    margin-right: 10px;
  }
}

.set_top {
  width: 100%;
  margin-bottom: 30px;
  text-align: center;
}

.copyU {
  text-align: center;
  margin-bottom: 25px;

  .table-btn {
    width: 200px;
  }
}

.set_tops {
  width: 100%;
  margin-bottom: 30px;
  text-align: center;
}

.set_box {
  width: 400px;
  margin: 0 80px;
  box-sizing: border-box;

  .minefield {
    margin-bottom: 15px;
  }

  .Recharge_Data {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;

    .Recharge_Data_box {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .el-input {
        width: 150px;
        height: 35px;

        input {
          width: 150px;
          height: 35px;
        }
      }

      span {
        font-size: 14px;
        width: 100px;
      }
    }

    .operation {
      width: 12%;
      display: flex;
      justify-content: space-between;

      .el-icon {

        &-circle-plus,
        &-remove {
          font-size: 22px;
          color: #3b425d;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
